@import "compass/reset";
@import "compass/css3/font-face";

@import url("http://fast.fonts.net/t/1.css?apiType=css&projectid=3af16084-ba56-49ca-b37d-0b49b59e1927");
@include font-face("AleoRegular", font-files("//cartodb-assets.global.ssl.fastly.net/odyssey.js/Aleo-Regular-webfont.woff", "//cartodb-assets.global.ssl.fastly.net/odyssey.js/Aleo-Regular-webfont.ttf", "//cartodb-assets.global.ssl.fastly.net/odyssey.js/Aleo-Regular-webfont.svg"), "//cartodb-assets.global.ssl.fastly.net/odyssey.js/Aleo-Regular-webfont.eot");
@include font-face("AleoBold", font-files("//cartodb-assets.global.ssl.fastly.net/odyssey.js/Aleo-Bold-webfont.woff", "//cartodb-assets.global.ssl.fastly.net/odyssey.js/Aleo-Bold-webfont.ttf", "//cartodb-assets.global.ssl.fastly.net/odyssey.js/Aleo-Bold-webfont.svg"), "//cartodb-assets.global.ssl.fastly.net/odyssey.js/Aleo-Bold-webfont.eot");
@include font-face("ProximaNovaBold", font-files("//cartodb-assets.global.ssl.fastly.net/odyssey.js/d999c07b-a049-4eb5-b8a6-4f36ae25e67e.woff", "//cartodb-assets.global.ssl.fastly.net/odyssey.js/4d4a75f5-d32a-4a09-8665-133afd39cc37.ttf", "//cartodb-assets.global.ssl.fastly.net/odyssey.js/8152bc4e-d700-4c78-b6be-326893e6f53f.svg"), "//cartodb-assets.global.ssl.fastly.net/odyssey.js/fbc6b03a-b3a1-427c-a884-053deca3a53c.eot");

body { text-align: center; min-height: 100%; background: #fff; }
html { min-height: 100%; }


.progress-bar {
  position:  fixed;
  left:  0;
  top: 0;
  height: 3px;
  display:  inline-block;
  background:  #ff7373;
  width:  20%;
  z-index:2;
}

.inner-header {
  background: #333;
  color: #fff;
  padding: 20px 0;
}

#layout {
	width: 100%;
	margin: 0px auto;
  background: #f5f5f5;
}

#header {
  padding: 20px 0;
  max-width: 800px;
  margin: 0 auto;

  h1 {
    font: 40px 'AleoBold';
    color: #fff;
  }

  h2 {
    font: 28px/32px 'AleoRegular';
    color: rgba(#fff, .6);
    margin-top: 12px;
  }

  h3 {
    font: 24px 'AleoRegular';
    color: rgba(#fff, .6);
    margin-top: 12px;
  }

  h4 {
    font: 22px 'AleoRegular';
    color: rgba(#fff, .6);
    margin-top: 12px;
  }
  h5 {
    font: 20px 'AleoRegular';
    color: rgba(#fff, .6);
    margin-top: 12px;
  }
  h6 {
    font: 18px 'AleoRegular';
    color: rgba(#fff, .6);
    margin-top: 12px;
  }
  p {
    font: 16px/26px 'AleoRegular';
    color: rgba(#fff, .6);
    margin-top: 12px;
  }
  a { text-decoration: none; color: #666;}
  ul, ol {
    font: 16px/26px 'AleoRegular';
    color: #666;
    margin-top: 12px;
  }
  ul { list-style-type: disc; }
  ol { list-style-type: lower-hexadecimal; }

  blockquote {
    background: #f5f5f5;
    padding: 20px;
    margin-top: 20px;
    border-radius: 4px;
  ul, ol {
     margin-left: 17px;
  }
  & *:first-child {
    margin-top: 0;
  }
  }
}

#map { width: 100%; height: 100%; }

#map_container{
  height: 250px;

  &.attachTop {
    position: fixed;
    width: 100%;
    top: 0;
    box-shadow: 0 2px 2px rgba(0, 0, 0 ,.2);
  }
}

#content {
  padding: 40px 40px 80px;
  max-width: 800px;
  margin: 0 auto;
  text-align: left;
  min-height: 1800px;
  img { max-width: 100%; margin: 20px 0 0 0; }
  &.attachMap {
    margin-top: 250px;
  }
  > div {
    margin-top: 40px;
    background: #fff;
    padding: 40px;
    border-radius: 2px;
    box-shadow: 0 1px 0px rgba(0, 0, 0, .1);

    &:first-child { margin: 0; }
  }
  h1 {
    font: 26px 'AleoBold';
    color: #333;
    &:before {
      content:"";
      height: 3px;
      display: block;
      width: 70px;
      background: #333;
      margin-bottom: 15px;
    }
  }
  h2, h3, h4, h5, h6 {
    font: 18px 'AleoBold';
    color: #333;
    margin-top: 20px;
  }
  p {
    font: 16px/26px 'AleoRegular';
    color: #666;
    margin-top: 20px;
  }
  a { text-decoration: none; color: #666;}
  ul, ol {
    font: 16px/26px 'AleoRegular';
    color: #666;
    margin-top: 20px;
  }
  ul { list-style-type: disc; }
  ol { list-style-type: lower-hexadecimal; }

  blockquote {
    background: #f5f5f5;
    padding: 20px;
    margin-top: 20px;
    border-radius: 4px;
    ul, ol {
       margin-left: 17px;
    }
    & *:first-child {
      margin-top: 0;
    }
  }

  strong {
    font-family: "AleoBold";
  }

  em {
    font-style: italic;
  }
}

div#credits {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 44px;
  background-color: #FFF;
  border-top: 1px solid #e5e5e5;
  z-index: 1000001;

  a { color: #ff7373; }
  span{
    padding: 18px 0 0 0;
    position: absolute;
    font-size: 12px;
    text-transform: uppercase;

    &.title{
      left: 40px;
      font-family: 'Proxima N W01 Bold', Sans-serif;
      color: #333;
    }

    &.author{
      right: 40px;
      font-family: AleoRegular, Serif;
      color: #999;
      letter-spacing: 2px;
      font-size: 10px;
      text-align: right;
    }

  }
}